<template>
	<view class="exampinfo_box">
		<view class="info">
			<view class="img" @click="showImage(exampinfo.caseTitleImage)">
				<!-- 视频、图片 -->
				<image style="width: 100%;" :src="exampinfo.caseTitleImage" mode="aspectFill"></image>
			</view>
			<view class="info_text">
				<view class="title">
					{{exampinfo.caseName}}
				</view>
				<view class="title_info">
					{{exampinfo.caseDetail}}
				</view>
				<view class="timelang">
					<span style="margin-right: 20rpx;letter-spacing: 4rpx;">项目周期:</span>
					<span style="">{{exampinfo.caseCycle}}</span>
				</view>
				<view class="money">
					<span style="margin-right: 20rpx;letter-spacing: 4rpx;">项目周期:</span>
					<span>{{exampinfo.caseAmount}}</span>
				</view>
				<view class="bottom">
					<view class="b_left">
						<span>253</span>
						<span>人学习过</span>
					</view>
					<view class="b_right">
						<view class="collect" @click="changecllectfn(exampinfo)">
							<image v-if="exampinfo.collectRecordFlag" style="width: 40rpx; height: 40rpx;"
								src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/staduy2.0/collect.png" mode="">
							</image>
							<image v-else style="width: 45rpx; height: 45rpx;"
								src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/staduy2.0/collect_k.png"
								mode=""></image>
							<span style="margin-left: 10rpx;">收藏</span>
						</view>
						<view class="comment" @click="openCommnet(exampinfo)">
							<uni-icons type="chat" size="20"></uni-icons>
							<span style="margin-left: 10rpx;font-size: 24rpx;">{{exampinfo.commentNum}}</span>
						</view>
						<view class="n_b_right">
							<view class="transmit">
								<image style="width: 40rpx; height: 40rpx;"
									src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/staduy2.0/zhuanfa_sta.png"
									mode=""></image>
						
								<!-- <span>转发</span> -->
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<view class="img_info">
			<view class="if_title">
				案列介绍
			</view>
			<view class="if_box">
				<jyfParser :html="exampinfo.caseDetailImage" :isAll="true"></jyfParser>
			</view>
		</view>
		<uni-popup ref="commentModel" type="bottom" @touchmove.stop.prevent="moveHandle">
							<!-- 评论模块 start -->
							<view class="video_comment" @tap="closeCommet">
								<view class="title">
									<view class="com_t_l">
										<text class="com_t_l_title">{{$L('全部评论')}}</text>
										<text class="com_t_l_total">{{$L('共有')}}{{videoDetail.commentNum}}{{$L('条评论')}}</text>
									</view>
									<image class="com_t_close" :src="imgUrl+'svideo/close.png'" @tap="closeComment">
									</image>
								</view>
		
								<scroll-view class="comment" scroll-y="true" @scrolltolower="getMoreCom">
									<view v-for="(item, index) in commentList" :key="index" class="com_item_wrap" :index="index"
										v-if="commentList.length>0">
										<view class="com_item">
											<view class="com_item_l">
												<view class="com_avator"
													:style="'background-image:url('+item.memberAvatar+');' + bgStyle"
													@click="intoUser(item.authorId?item.authorId:item.fromAuthorId)"></view>
												<view class="com_detail" :data-commentId="item.commentId"
													:data-authorId="item.authorId?item.authorId:item.fromAuthorId"
													:data-memberNickname="item.authorName?item.authorName:item.fromAuthorName"
													@tap.stop="replyComment">
													<text
														class="com_name">{{item.authorName?item.authorName:item.fromAuthorName}}</text>
													<text class="com_con">{{item.content}}</text>
													<view class="com_other">
														<text class="com_time">{{item.createTime}}</text>
														<text v-if="item.isSelf" class="del_com" data-type="comment"
															@tap.stop="delCom"
															:data-commentId="item.commentId">{{$L('删除')}}</text>
													</view>
												</view>
											</view>
											<view class="com_item_r">
												<view class="" :data-commentid="item.commentId" @tap="likeComment">
													  <svgGroup type="dianzan" width="40" height="40" px="rpx" v-if="item.isLike"
														   :color="diyStyle_var['--color_video_main']"></svgGroup>
													  <svgGroup type="dianzan" width="40" height="40" px="rpx" v-else color="#dedede"></svgGroup>
												</view>
												<text>{{item.likeNum}}</text>
											</view>
										</view>
		
										<view v-for="(itemReplay, index2) in item.replyList" :key="index2" class="child"
											:index="index2" v-if="item.replyList.length>0">
											<view class="com_item" v-if="index2<item.limit">
												<view class="com_item_l">
													<view class="com_avator"
														:style="'background:url('+itemReplay.memberAvatar+');' + bgStyle">
													</view>
													<view class="com_detail" :data-commentId="item.commentId"
														:data-replyId="itemReplay.replyId"
														:data-memberNickname="itemReplay.fromAuthorName"
														@tap.stop="replyComment">
														<text class="com_name">{{itemReplay.fromAuthorName}}</text>
														<text class="com_con">{{$L('回复')}}<text
																class="replay_name">{{itemReplay.toAuthorName!=undefined?itemReplay.toAuthorName:""}}：</text>{{itemReplay.content}}
														</text>
														<view class="com_other">
															<text class="com_time">{{itemReplay.createTime}}</text>
															<text v-if="itemReplay.isSelf == 1" class="del_com"
																data-type="reply" @tap.stop="delCom"
																:data-commentId="item.commentId"
																:data-replyId="itemReplay.replyId">{{$L('删除')}}</text>
														</view>
													</view>
												</view>
												<view class="com_item_r">
													<view class="" :data-commentid="item.commentId" :data-replyid="itemReplay.replyId" @tap="likeReply">
													  <svgGroup type="dianzan" width="40" height="40" px="rpx" v-if="itemReplay.isLike"
														   :color="diyStyle_var['--color_video_main']"></svgGroup>
													  <svgGroup type="dianzan" width="40" height="40" px="rpx" v-else color="#dedede"></svgGroup>
													</view>
													<text>{{itemReplay.likeNum}}</text>
												</view>
											</view>
										</view>
										<!-- 查看更多回复 -->
										<view v-if="item.replyList.length>item.limit&&item.isFoldReply" class="reply_pagnation"
											@tap.stop="getMoreReply(item)" :data-commentId="item.commentId"
											:data-rpn="item.rpn">
											<view class="left_line"></view>
											<text class="more_reply">{{$L('查看更多回复')}}</text>
											<view class="right_line"></view>
										</view>
										<!-- 收起更多回复 -->
										<view v-if="item.replyList.length==item.limit&&!item.isFoldReply"
											class="reply_pagnation" @tap.stop="closeMoreReply(item)"
											:data-commentId="item.commentId">
											<view class="left_line"></view>
											<text class="more_reply">{{$L('收起更多回复')}}</text>
											<view class="right_line"></view>
										</view>
									</view>
		
									<!-- 数据加载完毕 -->
									<dataLoaded :showFlag="!hasmore&&commentList.length>0" />
		
									<!-- 数据加载中 -->
									<dataLoading :showFlag="hasmore&&loading" />
		
									<!-- 页面loading -->
									<view class="page_loading_child" v-if="firstLoading">
										<image :src="imgUrl + 'svideo/page_loading_icon.gif'"></image>
									</view>
		
								</scroll-view>
		
								<view class="comment_empty" v-if="!firstLoading&&!commentList.length">
									<!-- 页面空数据 -->
									<emptyData :emptyIcon="imgUrl+'svideo/live_list_empty_icon.png'"
										:showFlag="!firstLoading&&!commentList.length" />
								</view>
		
								<view class="replay">
									<view class="input_wrap" @click.stop="showFocus=true">
										<text v-if="replyInfo!=''" class="reply_tip">{{$L('回复')}}@<text
												class="reply_name">{{replyInfo.memberNickname?replyInfo.memberNickname:replyInfo.memberName}}</text></text>
										<image v-if="replyInfo==''" :src="imgUrl+'svideo/edit.png'"></image>
										<input type="text" cursor-spacing="30" :focus="showFocus" name="reply_con"
											class="reply_inp" :placeholder="$L('赶快发表你的评论吧~')"
											placeholder-style="font-size:24rpx;color:#949494" confirm-type="send"
											@confirm="sendReplyComment" maxlength="100" v-model="input_val"></input>
									</view>
								</view>
							</view>
							<!-- 评论模块 end -->
						</uni-popup>
		<view class="" style="height: 200rpx;">
			
		</view>
	</view>
</template>

<script>
	import {
		checkPageHasMore
	} from "@/utils/live";
		import request from "@/utils/request";
		import jyfParser from '@/components/jyf-parser/jyf-parser'
		import uniPopup from '@/components/uni-popup/uni-popup.vue'
		import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
		import pageLoading from "../component/pageLoading.vue";
		import emptyData from "../component/emptyData.vue";
		import dataLoading from "../component/dataLoading.vue";
		import dataLoaded from "../component/dataLoaded.vue";
		const imgUrl = getApp().globalData.imgUrl;
		let cur_time = 0; //记录发送评论的时间，由于微信小程序本身input的发送时间在swiper里面会触发两次，所以时间间隔规避一下这个问题
		import {
			mapState,
			mapMutations
		} from 'vuex';
	export default {
		components:{
				jyfParser,
				uniPopup,
				uniPopupDialog,
				pageLoading,
				emptyData,
				dataLoading,
				dataLoaded
		},
		data() {
			return {
				collectshow:false,
				id:'',
				exampinfo:{},
				
				loading: false, //数据加载状态
					 videoDetail: {}, //短视频详情
					 authorDetail: '', //短视频作者详情
					 bgStyle: 'background-size:contain;background-position:center center;background-repeat: no-repeat;', //背景图片样式
				     commentList: [], // 评论列表
					hasmore: true, //是否还有数据，用于页面展示
				    input_val: '', //输入框内容
				     firstLoading: true, //是否是初次加载，的话展示页面居中的loading效果，
				     showFocus: false, //评论回复输入框默认失去焦点
				     replyInfo: '', //回复评论的数据
				     showComment: false, //是否显示评论
					 video_id:'',
				     pn: 1, //当前页
				     pageSize: 10, //每页数据
				imgUrl: getApp().globalData.imgUrl, //图片地址
			};
		},
		onLoad(optons) {
			this.id=this.$Route.query.id
			console.log(this.id);
			this.getinfo()
		},
		computed: {
			...mapState(['hasLogin', 'cartData', 'userInfo'])
		},
		methods:{
			// 获取详情
			getinfo(){
				this.$request({
					url:'v3/case/front/excellentCase/detail?caseId='+this.id,
					method:"GET"
				}).then(res=>{
					this.exampinfo=res.data
				})
			},
			changecllectfn(val){
				if(val.collectRecordFlag){
					// 取消收藏
					this.$request({
						url:'v3/study/front/collect/delete',
						method:'GET',
						data:{
							otherId:val.caseId,
							collectType:'2',
							
						}
					}).then(res=>{
						if(res.state==200){
							uni.showToast({
								title:"取消成功",
								icon:'none'
							})
						}
						 
						this.$set(val,"collectRecordFlag",false)
					})
				}else{
					console.log('val',val);
					// 添加收藏
					this.$request({
						url:'v3/study/front/collect/add',
						method:'POST',
						header:{
							'Content-Type': 'application/json'
						},
						data:{
							otherId:val.caseId,
							collectType:'2',
							collectTitle:val.caseName,
							collectContent:val.caseTitleImage
						}
					}).then(res=>{
						if(res.state==200){
							uni.showToast({
								title:"收藏成功",
								icon:'none'
							})
							this.$set(val,'collectRecordFlag',true)
						}
					})
				}
			},
			showImage(val){
			let arry=[]
			arry.push(val)
				uni.previewImage({
					urls:arry,//图片数组
					current:arry[0]
				})
			},
			// 评论
			//获取评论列表
			getCommentList() {
				let param = {}
				param.data = {}
				param.url = 'v3/video/front/video/comment/list'
				param.method = 'GET'
				param.data.pageSize = this.pageSize
				param.data.current = this.pn
				param.data.videoId = this.video_id
				param.data.commentType=1
				this.$request(param).then(res => {
					if (res.state == 200) {
						let list = res.data.list;
						list.forEach(el => el.rpn = 1);
			
						if (this.pn == 1) {
							this.commentList = list;
						} else {
							this.commentList = this.commentList.concat(list);
						}
			
						if (checkPageHasMore(res.data.pagination)) {
							this.pn++;
						} else {
							this.hasmore = false;
						} //初次加载的话更改状
						this.commentList.map((item) => {
							this.$set(item, 'limit', 3)
							this.$set(item, 'isFoldReply', true)
						})
						if (this.firstLoading) {
							this.firstLoading = false;
						}
			
						this.loading = false
					}
				})
			},
			
			//评论列表滑到底部加载数据
			getMoreCom() {
				if (this.hasmore) {
					this.getCommentList();
				}
			},
			//评论模块删除事件
			delCom(e) {
				e.stopPropagation()
				let tmp_data = e.currentTarget.dataset;
				uni.showModal({
					title: '',
					content: this.$L(`确认删除该评论？`),
					confirmText: this.$L('确定'),
					cancelText:this.$L('取消'),
					success: res => {
						if (res.confirm) {
							if (tmp_data.type == 'comment') {
								this.delComment(tmp_data.commentid);
							} else {
								this.delApply(tmp_data.replyid, tmp_data.commentid);
							}
						}
					}
				});
			},
			
			// 删除回复
			delApply(replyId, commentId) {
				let {
					video_id,
					videoDetail,
					commentList
				} = this;
				let param = {}
				param.data = {}
				param.url = 'v3/video/front/video/comment/delReply'
				param.method = 'POST'
				param.data.replyId = replyId
				this.$request(param).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					if (res.state == 200) {
						let index = commentList.findIndex(el => el.commentId == commentId);
						let r_index = commentList[index].replyList.findIndex(el => el.replyId == replyId);
						commentList[index].replyList.splice(r_index, 1);
						this.commentList = commentList
			
					}
				})
			},
			
			// 删除评论
			delComment(commentId) {
				let {
					video_id,
					videoDetail,
					commentList
				} = this;
				let param = {}
				param.data = {}
				param.url = 'v3/video/front/video/comment/del'
				param.method = 'POST'
				param.data.commentId = commentId
				param.data.commentType=1
				this.$request(param).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
			
					if (res.state == 200) {
						videoDetail.commentNum = --videoDetail.commentNum;
						uni.$emit('updateComment',videoDetail.commentNum)
						let index = commentList.findIndex(el => el.commentId == commentId);
						commentList.splice(index, 1);
						this.videoDetail = videoDetail
						this.commentList = commentList
					}
				})
			},
			
			// 点赞评论
			likeComment(e) {
				let commentId = e.currentTarget.dataset.commentid;
				let {
					commentList
				} = this;
				let param = {}
				param.data = {}
				param.url = 'v3/video/front/video/comment/clickPraise'
				param.method = 'POST'
				param.data.commentId = commentId
				if (this.hasLogin) {
					this.$request(param).then(res => {
						if (res.state == 200) {
							let index = commentList.findIndex(el => el.commentId == commentId);
							let isLike = commentList[index].isLike;
							commentList[index].isLike = !isLike;
							commentList[index].likeNum = !isLike ? commentList[index].likeNum + 1 : commentList[index].likeNum - 1;
							this.commentList = commentList
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
						}
					})
				} else {
					getApp().globalData.goLogin(this.$Route);
				}
			},
			
			// 点赞回复
			likeReply(e) {
				let commentId = e.currentTarget.dataset.commentid;
				let replyId = e.currentTarget.dataset.replyid;
				let {
					commentList
				} = this;
				let param = {}
				param.data = {}
				param.url = 'v3/video/front/video/comment/replyClickPraise'
				param.method = 'POST'
				param.data.replyId = replyId
				if (this.hasLogin) {
					this.$request(param).then(res => {
						if (res.state == 200) {
							let index = commentList.findIndex(el => el.commentId == commentId);
							let r_index = commentList[index].replyList.findIndex(el => el.replyId == replyId);
							let isLike = commentList[index].replyList[r_index].isLike;
							commentList[index].replyList[r_index].isLike = !isLike;
							commentList[index].replyList[r_index].likeNum = !isLike ? commentList[index].replyList[r_index].likeNum + 1 : commentList[index].replyList[r_index].likeNum - 1;
							this.commentList = commentList
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
						}
					})
				} else {
					getApp().globalData.goLogin(this.$Route);
				}
			},
			
			//回复评论
			replyComment(e) {
				let tmp = e.currentTarget.dataset;
				let {
					replyInfo
				} = this;
				if (this.hasLogin) {
					this.replyInfo = {
							commentId: tmp.commentid,
							replyId: tmp.replyid,
							memberNickname: tmp.membernickname
						},
						this.showFocus = true
				} else {
					uni.showToast({
						title: this.$L('需要登录才能回复哦'),
						icon: 'none'
					});
				}
			},
			
			//评论功能
			sendReplyComment(e) {
				if (!e.detail.value) {
					return
				}
				if (Date.parse(new Date()) - cur_time < 10) {
					return false;
				} else {
					cur_time = Date.parse(new Date());
				}
				if (!this.hasLogin) {
					getApp().globalData.goLogin(this.$Route);
					return;
				}
			
				let {
					replyInfo,
					video_id,
					commentList,
					videoDetail
				} = this;
				if (replyInfo == '') {
					//发布评论
					let param = {}
					param.data = {}
					param.url = 'v3/video/front/video/comment/publish'
					param.method = 'POST'
					param.data.content = e.detail.value
					param.data.videoId = video_id
					param.data.commentType=1
					this.$request(param).then(res => {
						if (res.state == 200) {
							let that = this
							// videoDetail.commentNum = Number(videoDetail.commentNum) + 1;
							res.data.replyList = []
							res.data.limit = 3
							commentList.unshift({
								...res.data,
								isSelf: true
							});
							// that.getCommentList()
							//清空输入内容
							setTimeout(() => {
								that.commentList = JSON.parse(JSON.stringify(commentList))
								that.input_val = ''
								that.showFocus = false
								that.videoDetail = videoDetail
							}, 0)
			
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					})
				} else {
					//回复评论
					let that = this
					let param = {}
					param.data = {}
					param.url = 'v3/video/front/video/comment/reply'
					param.method = 'POST'
					param.data.content = e.detail.value
					param.data.commentId = replyInfo.commentId
					param.data.parentReplyId = replyInfo.replyId ? replyInfo.replyId : 0
			
					this.$request(param).then(res => {
						if (res.state == 200) {
							let index = commentList.findIndex(el => el.commentId == replyInfo.commentId);
							commentList[index].replyList.push({
								...res.data,
								isSelf: true
							}); //清空输入内容
							if (commentList[index].replyList.length > 3) {
								commentList[index].isFoldReply = false
								commentList[index].limit = commentList[index].replyList.length
							}
							this.commentList = commentList
							this.input_val = ''
							this.showFocus = false
							this.replyInfo = ''
							this.$forceUpdate()
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					})
				}
			},
			
			//关闭评论
			closeComment() {
				this.$refs.commentModel.close()
			},
			
			//打开评论
			openCommnet(val) {
				// if (this.videoDetail.state != 2) {
				// 	uni.showToast({
				// 		title: this.$L('该视频未审核通过,不能评论哦～'),
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				this.video_id=val.caseId
				this.$refs.commentModel.open()
				this.firstLoading = true
				this.hasmore = true
				this.pn = 1
				this.getCommentList();
			},
			
			// 查看更多回复
			getMoreReply(reply) {
				reply.limit = reply.replyList.length
				reply.isFoldReply = false
			},
			
			// 收起更多回复
			closeMoreReply(reply) {
				reply.limit = 3
				reply.isFoldReply = true
			},
			
			chansgedd() {
				// #ifdef H5
				let currentId = 'myVideo' + this.video_id; // 获取当前视频id
				let current_video = videojs(currentId)
				if (this.videoPlay) {
					this.videoPlay = false;
					current_video.pause();
				} else {
					this.videoPlay = true;
					current_video.play();
				}
				// #endif
				// #ifdef MP
				if (this.videoPlay) {
					this.videoPlay = false;
					uni.createVideoContext('sldVideo_child' + this.video_id, this).pause();
				} else {
					this.videoPlay = true;
					uni.createVideoContext('sldVideo_child' + this.video_id, this).play();
				}
				// #endif
			},
			bindplay() {
				this.videoPlay = true;
			},
			bindpause() {
				this.videoPlay = false;
			},
			
			
			moveHandle() {},
			closeCommet() {
				this.showFocus = false;
				uni.hideKeyboard();
				if (this.replyInfo) {
					this.replyInfo = '';
				}
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
  .exampinfo_box{
	  .info{
		  height: 674rpx;
		  position: relative;
		  background-color: #fff;
		  .img{
			 height: 372rpx; 
			 background-color: #fff;
			 border-radius: 10rpx 10rpx 0 0;
			 text-align: center;
		  }
		  .info_text{
			  position: absolute;
			  top: 340rpx;
			  width: 100%;
			  padding: 20rpx;
			  border-radius: 20rpx 20rpx 0 0;
			  background-color: #fff;
			  font-size: 24rpx;
			  .title{
				  font-size: 28rpx;
				  font-weight: 600;
				  padding: 10rpx 0;
				  
			  }
			  .money,.timelang,.title_info{
			  	
			  	padding: 10rpx 0;			  
			  }
			  .bottom{
				  margin-top: 20rpx;
				  display: flex;
				  justify-content: space-between;
				align-items: center;
				.b_right{
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 300rpx;
					.n_b_right,.comment,.collect{
						display: flex;
						align-items: center;
					}
				}
			  }
		  }
		  
	  }
	  .img_info{
	  	 margin-top: 20rpx;
	  	 padding: 20rpx;
		 background-color: #fff;
		 .if_title{
			 font-size: 26rpx;
			 font-weight: 600;
		 }
		 .if_box{
			 margin-top: 20rpx;
			 background-color: #fff;
			 height: 1000rpx;
		 }
	  }
	  // 评论
	  overflow-y: hidden;
	  .video_comment {
	  		/* position: fixed; */
	  		position: absolute;
	  		z-index: 100;
	  		left: 0;
	  		right: 0;
	  		bottom: 0;
	  		width: 750rpx;
	  		/* height: 90vw; */
	  		background: #fff;
	  		border-radius: 15rpx 15rpx 0 0;
	  	}
	  
	  
	  	.video_comment .comment_empty {
	  		position: absolute;
	  		z-index: -1;
	  		left: 0;
	  		right: 0;
	  		bottom: 0;
	  		top: 70rpx;
	  	}
	  
	  	.video_comment .title {
	  		display: flex;
	  		padding: 30rpx;
	  		flex-direction: row;
	  		justify-content: space-between;
	  		align-content: center;
	  		height: 102rpx;
	  		border-bottom: 1px solid #f5f5f5;
	  	}
	  
	  	.video_comment .title .com_t_l {
	  		display: flex;
	  		flex: 1;
	  		flex-direction: row;
	  		justify-content: flex-start;
	  		align-items: center;
	  	}
	  
	  	.video_comment .title .com_t_l .com_t_l_title {
	  		color: #2d2d2d;
	  		font-size: 32rpx;
	  		margin-right: 18rpx;
	  	}
	  
	  	.video_comment .title .com_t_l .com_t_l_total {
	  		color: #949494;
	  		font-size: 22rpx;
	  	}
	  
	  	.video_comment .title .com_t_close {
	  		width: 48rpx;
	  		height: 48rpx;
	  	}
	  	
	  	.reply_pagnation {
	  		width: 550rpx;
	  		display: flex;
	  		flex-direction: row;
	  		justify-content: space-around;
	  		align-items: center;
	  		height: 40rpx;
	  		/* padding-left: 110rpx;
	  		padding-right: 90rpx; */
	  		margin: 0 auto;
	  	}
	  	
	  	.replay {
	  		position: absolute;
	  		z-index: 4;
	  		height: 100rpx;
	  		width: 750rpx;
	  		padding: 0 30rpx;
	  		background: #fff;
	  		display: flex;
	  		flex-direction: row;
	  		justify-content: center;
	  		align-items: center;
	  		left: 0;
	  		right: 0;
	  		bottom: 90rpx;
	  		box-shadow: 0px 0px 20px 0px rgba(86, 86, 86, 0.08);
	  	}
	  	
	  	.replay .input_wrap {
	  		background-color: #f5f5f5;
	  		border-radius: 12px;
	  		width: 690rpx;
	  		height: 65rpx;
	  		display: flex;
	  		flex-direction: row;
	  		justify-content: flex-start;
	  		align-items: center;
	  	}
	  	
	  	.replay .input_wrap .reply_inp {
	  		display: flex;
	  		flex: 1;
	  	}
	  	
	  	.replay .input_wrap image {
	  		width: 47rpx;
	  		height: 47rpx;
	  		margin: 0 10rpx;
	  	}
	  	
	  	.replay .reply_tip {
	  		color: #2d2d2d;
	  		font-size: 24rpx;
	  		padding: 0 15rpx;
	  	}
	  	
	  	.replay .reply_name {
	  		color: #4d8efb;
	  	}
	  	
	  	.video_comment .comment .com_item_wrap {
	  		display: flex;
	  		flex-direction: column;
	  		justify-content: flex-start;
	  		align-items: flex-start;
	  	}
	  	
	  	.video_comment .comment {
	  		width: 100%;
	  		height: 720rpx;
	  		display: flex;
	  		flex-direction: column;
	  		justify-content: flex-start;
	  		align-items: flex-start;
	  		margin-top: 20rpx;
	  		/* position: relative; */
	  		padding-bottom: 100rpx;
	  	}
	  	
	  	.video_comment .comment .com_item {
	  		display: flex;
	  		flex-direction: row;
	  		justify-content: space-between;
	  		align-items: flex-start;
	  		width: calc(750rpx - 60rpx);
	  		margin-left: 30rpx;
	  	}
	  	
	  	.video_comment .comment .com_item .com_item_l {
	  		display: flex;
	  		flex-direction: row;
	  		justify-content: flex-start;
	  		align-items: flex-start;
	  		width: 600rpx;
	  	}
	  	
	  	.video_comment .comment .com_item .com_item_l .com_avator {
	  		width: 43rpx;
	  		height: 43rpx;
	  		border-radius: 50%;
	  		margin-right: 18rpx;
	  		margin-top: 10rpx;
	  	}
	  	
	  	.video_comment .comment .com_item .com_item_l .com_detail {
	  		display: flex;
	  		flex-direction: column;
	  		justify-content: flex-start;
	  		align-items: flex-start;
	  		flex: 1;
	  	}
	  	
	  	.video_comment .comment .com_item .com_item_l .com_detail .com_name {
	  		color: #2d2d2d;
	  		font-size: 28rpx;
	  		margin-bottom: 12rpx;
	  	}
	  	
	  	.video_comment .comment .com_item .com_item_l .com_detail .com_con {
	  		color: #2d2d2d;
	  		font-size: 26rpx;
	  		line-height: 39rpx;
	  		margin-bottom: 7rpx;
	  		word-break: break-all;
	  	}
	  	
	  	.video_comment .comment .com_item .com_item_l .com_detail .com_other {
	  		display: flex;
	  		flex-direction: row;
	  		justify-content: center;
	  		align-items: flex-start;
	  		margin-bottom: 12rpx;
	  	}
	  	
	  	.video_comment .comment .com_item .com_item_l .com_detail .com_other .com_time {
	  		color: #949494;
	  		font-size: 22rpx;
	  		margin-right: 20rpx;
	  	}
	  	
	  	.video_comment .comment .com_item .com_item_l .com_detail .com_other .del_com {
	  		color:var(--color_video_main);
	  		font-size: 20rpx;
	  	}
	  	
	  	.video_comment .comment .com_item .com_item_r {
	  		display: flex;
	  		flex-direction: column;
	  		justify-content: flex-start;
	  		align-items: center;
	  	}
	  	
	  	.video_comment .comment .com_item .com_item_r image {
	  		width: 46rpx;
	  		height: 46rpx;
	  	}
	  	
	  	.video_comment .comment .com_item .com_item_r text {
	  		color: #949494;
	  		font-size: 20rpx;
	  		margin-top: -3rpx;
	  	}
	  	
	  	.comment .child {
	  		padding-left: 60rpx;
	  	}
	  	
	  	.video_comment .comment .child .com_item .com_item_l .com_avator {
	  		width: 30rpx;
	  		height: 30rpx;
	  		margin-top: 0;
	  		margin-right: 10rpx;
	  	}
	  	
	  	.video_comment .comment .child .com_item .com_item_l .com_detail .com_name {
	  		font-size: 26rpx;
	  		margin-bottom: 5rpx;
	  	}
	  	
	  	.video_comment .comment .child .com_item .com_item_l .com_detail .com_con {
	  		font-size: 24rpx;
	  	}
	  	
	  	.video_comment .comment .child .com_item .com_item_l .com_detail .com_con .replay_name {
	  		color: #949494;
	  		font-size: 24rpx;
	  	}
	  	
	  	.video_comment .comment .child .com_item {
	  		width: calc(750rpx - 120rpx);
	  	}
	  	
	  	.video_comment .comment .child .com_item .com_item_l {
	  		width: 550rpx;
	  	}
	  	
	  	.reply_pagnation {
	  		width: 550rpx;
	  		display: flex;
	  		flex-direction: row;
	  		justify-content: space-around;
	  		align-items: center;
	  		height: 40rpx;
	  		/* padding-left: 110rpx;
	  		padding-right: 90rpx; */
	  		margin: 0 auto;
	  	}
	  	
	  	.reply_pagnation .left_line,
	  	.reply_pagnation .right_line {
	  		height: 1rpx;
	  		background: rgba(0, 0, 0, 0.1);
	  		width: 166rpx;
	  	}
	  	
	  	.reply_pagnation .more_reply {
	  		color: #2d2d2d;
	  		font-size: 22rpx;
	  	}
	  	
	  	.page_loading_child {
	  		position: fixed;
	  		bottom: 0;
	  		left: 0;
	  		width: 750rpx;
	  		height: 750rpx;
	  		display: flex;
	  		flex-direction: row;
	  		justify-content: center;
	  		align-items: center;
	  		background-color: transparent;
	  	}
	  	
	  	.page_loading_child image {
	  		width: 60rpx;
	  		height: 60rpx;
	  	}
  }
  
</style>
